<div *ngIf="lvTitle" class="lv-transfer-panel-title">
  <ng-container *ngIf="lvMode === transferModeTypeEnum.SIMPLE; else defaultTitle">
    <ng-container *ngIf="typeUtils.isRealString(belong === 'source' ? lvTitle[0] : lvTitle[1])">
      <div class="lv-transfer-panel-title-content">
        <div class="lv-transfer-panel-title-item" [class.active]="belong === 'source'" (click)="changeBelong('source')">
          <ng-container
            *ngTemplateOutlet="
              titleTpl;
              context: {
                config: {
                  title: lvTitle[0],
                  total: total,
                  showTotal: lvShowItemTotal[0],
                  color: belong === 'source' ? '#2673E5' : '#808080'
                }
              }
            "
          ></ng-container>
        </div>

        <div class="lv-transfer-panel-title-delimiter"></div>

        <div class="lv-transfer-panel-title-item" [class.active]="belong === 'target'" (click)="changeBelong('target')">
          <ng-container
            *ngTemplateOutlet="
              titleTpl;
              context: {
                config: {
                  title: lvTitle[1],
                  total: belong === 'target' ? data.length : lvSelection.length,
                  showTotal: lvShowItemTotal[1],
                  color: belong === 'target' ? '#2673E5' : '#808080'
                }
              }
            "
          ></ng-container>
        </div>
      </div>
      <ng-container *ngTemplateOutlet="operateTpl"></ng-container>
    </ng-container>

    <ng-container *ngIf="typeUtils.isTemplateRef(belong === 'source' ? lvTitle[0] : lvTitle[1])">
      <ng-container
        *ngTemplateOutlet="belong === 'source' ? lvTitle[0] : lvTitle[1]; context: { $implicit: data, belong: belong }"
      ></ng-container>
    </ng-container>
  </ng-container>

  <ng-template #defaultTitle>
    <ng-container *ngIf="typeUtils.isRealString(lvTitle)">
      <div class="lv-transfer-panel-title-content">
        <ng-container
          *ngTemplateOutlet="titleTpl; context: { config: { title: lvTitle, total: total, showTotal: lvShowItemTotal, color: '#2673E5' } }"
        ></ng-container>
      </div>
      <ng-container *ngTemplateOutlet="operateTpl"></ng-container>
    </ng-container>
    <ng-container *ngIf="typeUtils.isTemplateRef(lvTitle)">
      <ng-container *ngTemplateOutlet="lvTitle; context: { $implicit: data, belong: belong }"></ng-container>
    </ng-container>
  </ng-template>
</div>

<div class="lv-transfer-panel-container">
  <div *ngIf="lvHeader" class="lv-transfer-panel-header">
    <ng-container *ngTemplateOutlet="lvHeader; context: { $implicit: data, belong: belong }"></ng-container>
  </div>

  <div class="lv-transfer-panel-body" [ngClass]="{ 'lv-transfer-panel-customer-body': lvRender }">
    <ng-container *ngIf="lvRender; else defaultRender">
        <ng-container *ngTemplateOutlet="lvRender; context: { $implicit: data, selection: lvSelection, belong: belong }"></ng-container>
    </ng-container>
  </div>

  <div
    class="lv-transfer-panel-footer"
    [ngClass]="{ 'lv-transfer-panel-has-page': lvColumns.length && !lvFooter, 'lv-transfer-panel-customer-footer': !!lvFooter }"
  >
    <div class="lv-transfer-panel-footer-page" [ngClass]="{ 'lv-transfer-panel-none': !lvColumns.length || !!lvFooter }">
      <lv-paginator
        #page
        [style.display]="data?.length ? 'flex' : 'none'"
        lvMode="simple"
        [lvPageSize]="lvItemSize"
        [lvShowPageSizeOptions]="false"
        [lvShowTotal]="false"
        [lvTotal]="total"
      ></lv-paginator>
    </div>

    <ng-container *ngIf="!!lvFooter">
      <ng-container *ngTemplateOutlet="lvFooter; context: { $implicit: data, belong: belong }"></ng-container>
    </ng-container>
  </div>
</div>

<ng-template #titleTpl let-config="config">
  <p class="lv-transfer-panel-title-info" lv-overflow>{{ config.title }}</p>
  <lv-badge *ngIf="config.showTotal" [lvValue]="config.total" [lvBackgroundColor]="config.color" [lvShowZero]="true" [lvMaxValue]="maximum"></lv-badge>
</ng-template>

<ng-template #operateTpl>
  <div class="lv-transfer-panel-header-operate">
    <ng-container *ngIf="typeUtils.isTemplateRef(lvOperateTemplate); else defaultOperateTpl">
      <ng-container
        *ngTemplateOutlet="lvOperateTemplate; context: { $implicit: data, selection: lvSelection, paginator: page, panel: transferTable }"
      ></ng-container>
    </ng-container>
  </div>
</ng-template>

<!--内容区-->
<ng-template #defaultRender>
  <!--table-->
  <lv-transfer-table
    #transferTable
    [lvBelong]="belong"
    [lvSize]="lvSize"
    [lvPaginator]="page"
    [lvPageSize]="lvItemSize"
    [lvData]="data"
    [lvAsync]="lvAsync"
    [lvColumns]="lvColumns"
    [lvDataKey]="lvDataKey"
    [lvShowColControl]="lvShowColControl"
    [(lvSelection)]="lvSelection"
    (lvSelectionChange)="selectionChange($event)"
    (lvRemoveItem)="removeItem($event)"
    (lvStateChange)="stateChange($event)"
    (colDisplayChange)="colDisplayChange.emit($event)"
  ></lv-transfer-table>
</ng-template>


<ng-template #defaultOperateTpl>
  <button lv-button lvType="link" lvSize="auto" *ngIf="belong === 'source'" (click)="selectAll()">
    {{ i18n.get(lvAsync ? 'selectThisPage' : 'selectedAll') }}
  </button>
  <button lv-button lvType="link" lvSize="auto" *ngIf="belong === 'target'" (click)="DeleteAll()">{{ i18n.get('deleteAll') }}</button>
</ng-template>
